<template>
  <view :class="['u-demo', {isIp5: isIp5 },{isIpxx: isIpxx }, {Nexus5: Nexus5 }]">


    <u-toast ref="uToast" />
    <u-popup v-model="show" mode="center" border-radius="14">

      <u-upload :action="action" :file-list="fileList" :max-size="1 * 1024 * 1024" max-count="1" :deletable="false" ref="uUpload"
        @on-success="qrUpload">
      </u-upload>

      <view class="u-flex u-row-center">
        <u-button size="mini" :custom-style="{marginTop: '20rpx'}" @click="clear">删除</u-button>
      </view>
    </u-popup>

    <view class="container">


      <view class="topbanner1">
        <image mode="widthFix" class="bgimg1" src="../../static/common/img/111.jpg"></image>

        <view class="box">
          <u-input :custom-style="{color:'#fff' }" v-model="to" placeholder-style="color: #fff;" :clearable="false"
            placeholder="To:请输入对方名字" />
        </view>


      </view>
      
        <view class="topbanner3">
          <image mode="widthFix" class="bgimg3" src="../../static/common/img/112.jpg"></image>
          <view class="box3">
             <view class="customerweima" @click="show = true">自定义二维码</view>
          </view>
        </view>
      
      <view class="topbanner2">
        <image mode="widthFix" class="bgimg2" src="../../static/common/img/113.jpg"></image>
        
          <view class="box2">
            <u-input type="textarea" :auto-height="true"  :custom-style="{paddingLeft:'46rpx','line-height':'46rpx'}" v-model="content"
             :height="230"
             width="300"          
              class="textarea"
               :clearable="false"
              placeholder-style="color: #d7d7d7;" placeholder="请输入表白内容" />
          </view>
        
        
        
          <!-- footer -->
          <view class="footer">
            <view class="erweima">
              <view v-if="!qrSrc">
                <image class="image1" mode="widthFix" src="http://39.103.175.135:8888/img/erweima.png"></image>
          
          
          
                <image class="image4" mode="widthFix" src="http://39.103.175.135:8888/img/tanhao.png"></image>
              </view>
              <image v-else :src="qrSrc" class="image1" mode="widthFix"></image>
            </view>
            <view class="chagnan">
              <image class="image2" mode="widthFix" src="http://39.103.175.135:8888/img/changan.png"></image>
            </view>
          
            <view class="board">
              <!-- 选择模板 -->
              <view class="fl" @click="styleShow = true">
                <image mode="widthFix" src="http://39.103.175.135:8888/img/xuanze.png"></image>
              </view>
              <!-- 生成二维码 -->
              <view class="fr" @longpress="createQr()" @click="createQr()">
                <image mode="widthFix" src="http://39.103.175.135:8888/img/shengcheng.png"></image>
              </view>
            </view>
          
          
          </view>
          
          
          
        
        
        
      </view>



      <!-- content 部分 -->
  

      <!-- 表白内容 -->

    </view>




    <u-popup v-model="styleShow" mode="center" border-radius="14" width="750rpx" height="95%">

      <u-radio-group v-model="templateType" @change="radioGroupChange">
        <u-radio @change="radioChange" v-for="(item, index) in list" :key="index" :name="item.name" :disabled="item.disabled">
          {{item.name}}
        </u-radio>


      </u-radio-group>
      <u-image class="imgss" width="100%" height="100%" :src="templatePic"></u-image>
    </u-popup>


  </view>
</template>

<script>
  export default {
    data() {
      return {
        hideText: false,
        to: '',
        content: '',
        qrSrc: null,
        qrImg: null,
        show: false,
        styleShow: false,
        // 演示地址，请勿直接使用
        action: 'https://1847961572749689.cn-hangzhou.fc.aliyuncs.com/2016-08-15/proxy/love520.LATEST/love520/confess/upload',
        //action: 'http://localhost:8089/2016-08-15/proxy/love520.LATEST/love520/confess/upload',
        fileList: [

        ],
        list: [{
            name: '模板1',
            disabled: false
          },
          {
            name: '模板2',
            disabled: false
          }
        ],
        // u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
        templateType: '模板1',
        templatePic: 'http://39.103.175.135:8888/img/13.jpg',
        isIpx: false,
        isIp5: false,
        isIpxx: false,
        Nexus5: false
      };
    },
    onLoad() {
      uni.getSystemInfo({
        success: (res) => {
          console.log(res.model, '==')
          var name = 'iPhone X'
          var isIp5 = 'iPhone 5'
          var Nexus5 = 'Nexus 5'

          if (res.model.indexOf(name) > -1) {
            this.isIpx = true
            this.isIpxx = true
          }
          if (res.model.indexOf(isIp5) > -1) {
            this.isIp5 = true
          }
          if (res.model.indexOf(Nexus5) > -1) {
            this.Nexus5 = true
          }
        }
      })
    },
    methods: {
      handler1(e) {
        console.log(e.target.value)
      },
      inpFocus() {
        this.hideText = true
      },
      inpBlur() {

        if (this.content.length > 0) {
          this.hideText = true

        } else {
          this.hideText = false
        }
      },
      qrUpload(data, index, lists, name) {
        if (data === 'error') {
          this.$refs.uToast.show({
            title: '生成失败，请检查您的输入是否包含违规信息',
            type: 'error'
          })
          return
        }

        this.qrImg = data
      },
      createQr() {
        uni.showLoading({
          title: "生成中"
        })
        uni.request({
          method: 'POST',
          data: {
            "to": this.to,
            "content": this.content,
            "logo": this.qrImg,
            "template": this.templateType.replace('模板', '')
          },
          url: 'https://1847961572749689.cn-hangzhou.fc.aliyuncs.com/2016-08-15/proxy/love520.LATEST/love520/confess/save',
          //url: 'http://localhost:8089/2016-08-15/proxy/love520.LATEST/love520/confess/save',
          success: (res) => {
            if (res.data === 'error') {
              uni.hideLoading()
              this.$refs.uToast.show({
                title: '生成失败，请检查您的输入是否包含违规信息',
                type: 'error'
              })
              return
            }

            this.qrSrc = 'https://itheima-test-love520-2.oss-cn-beijing.aliyuncs.com/' + res.data +
              "qr.jpg"
            // 提示用户下载成功
            uni.showToast({
              title: "生成成功",
              icon: "none"
            })
          }
        })

      },
      async saveQr() {
        uni.showLoading({
          title: "下载中"
        })
        // 将远程文件下载到小程序的内存里面
        const result1 = await uni.downloadFile({
          url: this.qrSrc
        })
        const {
          tempFilePath
        } = result1[1]
        // 将小程序的临时文件下载到本地上
        const result2 = await uni.saveImageToPhotosAlbum({
          filePath: tempFilePath
        })
        // 提示用户下载成功
        uni.showToast({
          title: "下载成功",
          icon: "none"
        })
      },
      clear() {
        this.$refs.uUpload.clear();
      },
      radioChange(e) {
        if (e === '模板1') {
          this.templatePic = 'http://39.103.175.135:8888/img/13.jpg'
        } else if (e === '模板2') {
          this.templatePic = 'http://39.103.175.135:8888/img/15.jpg'
        }
      },
      // 选中任一radio时，由radio-group触发
      radioGroupChange(e) {
        // console.log(e);
      }

    }
  };
</script>

<style lang="scss" scoped>
  .u-demo,
  page {
    height: 100%;
    padding: 0;
  }

  image {
    display: block;
  }

  .topbanner1 {
    position: relative;

    .bgimg1 {
      width: 100%;
    }

    .box {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: 12rpx;
      z-index: 3000;
    }
  }
    
  .topbanner3 {
     position: relative;
      margin-top: -1px;
     .bgimg3 {
       width: 100%;
     }
     .box3 {
       position: absolute;
       left: 50%;
       top: 5rpx;
       transform: translateX(-50% );
     }
  }
  .topbanner2 {
     margin-top: -1px;
     position: relative;
    
    .box2 {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      top: -25rpx;
      z-index: 3000;
      width: 300rpx;
    }
    .bgimg2 {
      width: 100%;
    }
  }

  .container {
    position: relative;
    width: 100%;
    height: 100%;
    // background: url(http://39.103.175.135:8888/img/520bg.jpg) no-repeat top center;
    // -webkit-background-size: cover;
    // background-size: cover;

    // 输入框
    .inp_box {
      // border: 1px solid red;
      font-size: 0;

      // background-color: #eee;
      position: absolute;
      top: 236rpx;
      left: 50%;
      transform: translateX(-50%);
      margin-top: -30rpx;

      .inp_content {
        width: 378rpx;
        height: 87rpx;
        -webkit-background-size: cover;
        background-size: cover;

        .inp {
          color: #fff;
          width: 378rpx;
          background-color: red;
          height: 87rpx;
          line-height: 87rpx;
        }


        .text {
          color: #fff;
          font-size: 30rpx;

          position: absolute;
          top: 0;
          left: 0;

          text {
            font-weight: 600;

          }
        }
      }
    }

    .ipx {
      top: 281rpx;
    }
  }

  .confession {
    margin-top: 50rpx;
    display: flex;
    height: 87rpx;
    line-height: 87rpx;

    .confession_text {
      width: 190rpx;
      white-space: nowrap;
      color: #f16c70;
      font-size: 28rpx;
      height: 87rpx;
      line-height: 75rpx;
    }

    u-input {
      height: 87rpx;
      line-height: 87rpx;
    }
  }

  .footer {
    margin-bottom: 55rpx;
    position: absolute;
    bottom: 30rpx;
    left: 50%;
    transform: translateX(-50%);

    .erweima {
      position: relative;
      width: 168rpx;
      height: 168rpx;
      margin: auto;
      border-radius: 10rpx;
      border: 1px solid #f9698a;

      .image1 {

        width: 100%;
      }

      .image4 {
        width: 58rpx;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }

    .chagnan {
      height: 40rpx;
      width: 160rpx;
      margin: 10px auto 40rpx;

      .image2 {

        width: 100%;
      }
    }

    .board {
      display: flex;
      width: 515rpx;
      justify-content: space-between;

      .fl {
        width: 224rpx;
      }

      .fr {
        width: 224rpx;
      }

      image {
        width: 224rpx;
      }
    }
  }

  // //   兼容头疼写法
  // @media ( min-width: 374px )  and ( max-width: 376px ){
  //   .container .inp_box {
  //     top: 147px;
  //   }
  //   .confession {
  //         margin-top: 56px;
  //   }
  // }

  .customerweima {
    font-size: 25rpx;
    text-align: center;
    margin-left: -15rpx;
    line-height: 50rpx;
    height: 50rpx;
    color: #f16b73;
  }

  .textarea {
    width: 400rpx;
    line-height: 40px;
    margin-top: 25rpx;
  }

  .isIp5 {
    .textarea {
      margin-top: 10rpx;
    }
  }

  .isIpxx {
    .confession {
      margin-top: 72rpx;

    }
  }

  .Nexus5 {
    .confession {
      margin-top: 38rpx;

    }
  }
</style>
